<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      const users = [
        { id: 1, name: "jack", age: 20 },
        { id: 2, name: "lili", age: 21 },
        { id: 3, name: "lucy", age: 22 },
        { id: 4, name: "rose", age: 23 },
        { id: 5, name: "lili", age: 24 },
      ];
      users.sort((a, b) => b.age - a.age);
      function createTableByUsers(data = []) {
        const html = String.raw;
        return html`<table>
          <thead>
            <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>年龄</th>
            </tr>
          </thead>
          <tbody>
            ${data
              .map((el) => {
                return html`
                  <tr>
                    <td>${el.id}</td>
                    <td>${el.name}</td>
                    <td>${el.age}</td>
                  </tr>
                `;
              })
              .join("")}
          </tbody>
        </table>`;
      }

      document.getElementById("box").innerHTML = createTableByUsers(users);
    </script>
  </body>
</html>
